<template>
  <div class="margin_30">
    <el-card shadow="never" :body-style="{ padding: '20px' }">
      <div slot="header">
        <el-upload
          ref="upload"
          action="/lejuAdmin/material/uploadFileOssSave"
          :on-success="materialUpload"
          :headers="token"
          :show-file-list="false"
          multiple
          :limit="5"
        >
          <el-button slot="trigger" size="small" type="primary">点击上传素材</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>

      </div>
      <!-- card body -->
      <el-row>
        <el-col v-for="(item) in list" :key="item.id" style="width:20%;margin-bottom:20px;padding:0 10px">
          <el-card shadow="never">
            <div slot="header">
              <span>创建时间：{{ item.createTime }}</span>
            </div>
            <el-image
              style="width: 100%; height: 220px"
              :src="item.ossUrl"
              :preview-src-list="srcList"
            />
            <el-button style="margin-top:20px;width:90px;text-align:center" type="danger" size="mini" @click="delMaterial(item.id)">删除</el-button>

          </el-card>
        </el-col>
      </el-row>
      <el-pagination
        :current-page="paginationParams.start"
        :page-sizes="paginationParams.pageSize"
        :page-size="paginationParams.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paginationParams.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

  </div>
</template>

<script>
import { findMaterialByPage, delMaterial } from '@/api/content/material'
import mix from '@/mixins'
export default {
  name: 'VueAdminTemplateMasterIndex',
  mixins: [mix],
  data() {
    return {
      list: [],
      srcList: []
    }
  },

  created() {
    this.getMaterialList()
  },

  mounted() {

  },

  methods: {
    // 删除素材
    delMaterial(id) {
      // console.log(id)
      delMaterial(id)
        .then(res => {
          // console.log(res)
          this.getMaterialList()
        })
    },
    // 素材上传成功
    materialUpload(res) {
      // console.log(res)
      this.getMaterialList()
    },
    // 获取素材列表 paginationParams是在mixins里封装过的
    getMaterialList() {
      findMaterialByPage(this.paginationParams.start, this.paginationParams.limit)
        .then(res => {
          this.list = res.data.rows
          this.paginationParams.total = res.data.total
          this.srcList = this.list.map(ele => ele.ossUrl)
        })
    },
    // 每页多少条改变时触发（main.js中切换页码中文）
    handleSizeChange(e) {
      this.paginationParams.limit = e
      this.getMaterialList()
    },
    // 当前页码发生改变触发
    handleCurrentChange(e) {
      this.paginationParams.start = e
      this.getMaterialList()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
